<template>
	<view class="addminAddress">
		<view class="addminAddress-plate-1" v-if="boxShow == 1">
			<image src="../../../../../static/ic_address_empty.png" mode="widthFix"></image>
			<text>暂无收货地址</text>
			<button class="bg-btn">添加收货地址</button>
		</view>
		<view class="addminAddress-plate-2" v-else>
			<view class="item" v-for="(addressArr,index) in addressArr" :key="index">
				<view class="item-top">
					<view class="text-top">
						<text>{{addressArr.consignee}}</text>
						<text>{{addressArr.mobile}}</text>
					</view>
					<view class="text-bottom">
						{{addressArr.province_name+addressArr.city_name+addressArr.district_name+addressArr.address}}
					</view>
				</view>
				<view class="item-bottom">
					<view class="item-bottom-left">
						<u-radio-group v-model="value" @change="onChange(index)">
							<u-radio shape="circle" :name="index">设置默认地址</u-radio>
						</u-radio-group>
					</view>
					<view class="item-bottom-right">
						<button class="border-btn" @click="delAddress(index)">删除</button>
						<button class="bg-btn" @click="setAddress(index)">编辑</button>
					</view>
				</view>
			</view>
			<navigator url="newAddress/newAddress" open-type="navigate">
				<button class="btn">新增地址</button>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:0,
				value:'0',
				boxShow:0,
				addressArr:[]
			}
		},
		created() {
			this.getAddressList()
		},
		methods: {
			setAddress(index){
				uni.navigateTo({
					url:'newAddress/newAddress?addressIndex=' + index
				})
			},
			onChange(index){
				uni.request({
				    url:this.$Url +'/index.php/App/Users/updateUserDefaultAddress',
				    method:'POST',
				    data:{
				       id:this.addressArr[index].address_id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       console.log(res);
				    }
				})
			},
			//请求地址列表
			getAddressList(){
				uni.request({
				    url:this.$Url +'/index.php/App/Users/userAddressList',
				    method:'POST',
				    data:{
				       
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       this.addressArr = res.data.data
				    }
				})
			},
			//删除地址
			delAddress(index){
				uni.request({
				    url:this.$Url +'/index.php/App/Users/delAddress',
				    method:'POST',
				    data:{
				       id:this.addressArr[index].address_id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if(res.data.status == 200){
							this.addressArr.splice(index,1)
							console.log(this.addressArr)
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.addminAddress{
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		background-color: #dbb769;
		width: 260upx;
		height: 75upx;
		border-radius: 80upx;
		color: #fff;
		position: fixed;
		left: 240upx;
		bottom: 200upx;
		z-index: 100;
	}
	.addminAddress-plate-1{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		image{
			width: 220upx;
			margin-bottom: 80upx;
			margin-top: 120upx;
		}
		text{
			font-size: 30upx;
			color: #999;
			margin-bottom: 45upx;
		}
		.bg-btn{
			width: 360upx;
			height: 75upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.addminAddress-plate-2{
		width: 690upx;
		margin: 0 auto;
		.item{
			box-shadow: 0px 0px 2px 3px rgba(0,0,0,0.1);
			width: 100%;
			color: #333;
			margin: 20upx 0 0 0;
			background-color: #fff;
			.item-top{
				padding: 40upx 30upx;
				border-bottom: 1px solid #e4e4e4;
				.text-top{
					margin-bottom: 20upx;
					text:first-child{
						font-size: 30upx;
						margin-right: 25upx;
					}
					text:last-child{
						font-size: 24upx;
					}
				}
				.text-bottom{
					font-size: 26upx;
					color: #555;
				}
			}
			.item-bottom{
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item-bottom-left{
					margin-left: 30upx;
					font-size: 26upx;
					color: #333;
				}
				.item-bottom-right{
					display: flex;
					align-items: center;
					margin-right: 30upx;
					button{
						width: 125upx;
						height: 50upx;
						font-size: 22upx;
						margin-left: 20upx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
}
</style>
